<html>
    <head>
        <title>单文件组件</title>
    </head>
    <body>
        <script>
            // 单文件组件

                    // 一、介绍
                              /*
                                  在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，
                                  紧接着用 new Vue({el:'#container'})  在每个页面内指定一个容器元素。

                                   这种方式在很多"中小型项目"中运作的很好，在这些项目里 JavaScript 值被用来加强特定的视图。
                                   但当在更负责的项目中，后者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

                                     1、全局定义:  强制要求每个 component 的命名不能重复。
                                     2、字符串模板：  缺乏语法高亮，在HMTL有多行的时候，需要用到丑陋的 '\'
                                     3、不支持CSS：  意味着当HTML和JavaScript组件化是，CSS明显被遗漏
                                     4、没有构建步骤： 限制智能使用HTML 和 ES5 JavaScript ，而不能使用预处理器， 如 Pug (formerly Jade) 和 Babel。
                            */

                            /*
                                文件扩展名为　.vue 的 single-file component (单文件组件) 为以上所有问题提供了解决方法，
                                并且还可以使用 webpack 或 Browserify 等构建工具。
                            */

                            // 这是一个文件名为 Hello.vue 的简单实例:
                                    /*
                                        <template>
                                            <p>{{ greeting } WOrld!}</p>
                                        </template>

                                        <script>
                                            module.exports ={
                                                data:function(){
                                                     return {
                                                        greeting:'Hello'
                                                     }
                                                }
                                            }
                                        <-/script>

                                        <style scoped>
                                            p {
                                                font-size: 2em;
                                                text-align:center;
                                            }
                                        </style>
                                    */


                            /*
                                现在，通过单文件组件，我们获得了 ：

                                        1、完整高亮语法

                                        2、CommonJS 模块化

                                        3、组件作用域的CSS


                                而且，正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，  比如 Pug, Babel(with ES2015 modules) 和 Stylus.
                            */ 

                                        /*
                                            <template lang="jade">
                                                div 
                                                    p {{ greeting}} World!
                                            </template>

                                            <script>
                                                import OtherComponent from './OtherComponent.vue'

                                                export default{
                                                    data(){
                                                        return {
                                                            greeting:'Hello'
                                                        }
                                                    },
                                                    components:{
                                                        OtherComponent
                                                    }
                                                }
                                            <-/script>

                                            <style lang="stylus" scoped>
                                                p  
                                                    font-size: 2em
                                                    text-align:center
                                            </style>
                                        */

                            /*
                                这些特定的语言只是例子，你可以只是简单地使用Babel,TypeScript,SCSS,PostCSS，或者其他任何能够帮助你提高生产力的预处理器。
                                如果搭配 vue-loader 使用 webpack，它也能为CSS Modules提供头灯支持。              
                            */

                        //★、 怎么看待关注点分离？
                                    /*
                                        一个重要的事情值得注意，"关注点分离不等于文件类型分离"。

                                        在现代UI开发中，我们已经发现，相比于把大妈裤分离成三个大的层次并将其相互交织起来，把他们划分为松散都和的组件将其组合起来更合理一些。
                                    
                                        在一个组件里，器模板、逻辑 和样式是内部耦合的，并且把他们搭配在一起实际上是的组件更加内聚且更可维护。

                                        即便你不喜欢单文件组件，你仍然可以把JavaScript 、 CSS 分离成独立的文件然后做到"热重载" 和 "预编译"

                                                       --my-component.vue--
                                                       <template>
                                                            <div>This will be  pre-compiled</div>
                                                       </template>
                                                       <script src="./my-component.js"><-/script>
                                                       <style src="./my-component.css"></style>
                                    */
                                         
                                    
                // 二、起步
                           //1、 例子沙箱

                                    /*
                                        如果你希望深入了解并开始使用单文件组件,请你来 CodeSandBox 看看下面的这个简单的todo 应用：


                                        https://codesandbox.io/p/sandbox/o29j95wx9?file=%2Findex.html%3A12%2C1
                                    */
                                        

                            //2、针对刚接触 JavaScript 模块开发系统的用户
                                    /*
                                        有了 .vue 组件，我们就进入了高级JavaScript 应用领域。如果你还没有准备好的话，意味着
                                        你还需要学会使用一些附加的工具：
                                        
                                            ①、 Node Package Manager (NPM) ：   
                                                    阅读:  https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry/   中关于如何从注册地(registry)
                                                    获取包的章节。

                                            ②、 Modern JavaScript with ES2015/16 :
                                                    阅读Babel的 :  https://babeljs.io/docs/learn 中的 "Learn ES2015 guide".你不需要立刻记住每一个方法，但是你可以保留这个页面一边后期参考。

                                        在你花上一天时间了解这些资源之后，我们建议你参考 Vue Cli : https://cli.vuejs.org/zh/    
                                        只要你遵循指示，你就能很快地运行一个带有 .vue组件、ES2015、WebPack 和 热重载(hot-reloading)的Vue 项目！！
                                    */

                            //3、针对高级用户
                                    /*
                                        CLI会为你搞定大多数工具的配置问题，同时也支持细粒度自定义配置项。

                                        有时候你会想从零搭建你自己的构建工具，这时你需要通过Vue Loader 手动配置 webpack.
                                        关于学习更多webpack的内容，请查阅其官方文档和 Webpack Academy.
                                    */
                                    
        </script>
        </script>
    </body>
</html>